<template>
  <a-drawer
    :width="340"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    unmountOnClose
  >
    <template #title> 审批人设置 </template>
    <div class="item">
      <a-space direction="vertical" size="large">
        <a-radio-group v-model="approverConfig.value.participantFormat">
          <a-radio :value="1">指定成员</a-radio>
          <a-radio :value="2">角色</a-radio>
          <a-radio :value="3">上级</a-radio>
        </a-radio-group>
      </a-space>
    </div>
    <div>
      <a-form ref="demandTemplateRef" layout="vertical" :model="approverConfig">
        <a-form-item
          v-show="approverConfig.value.participantFormat === 1"
          field="tempName"
          label="选择指定成员"
          validate-trigger="input"
          required
        >
          <div
            style="
              border: 1px solid #c9cdd4;
              width: 100%;
              border-radius: 4px;
              display: flex;
              flex-wrap: wrap;
              min-height: 30px;
              cursor: text;
            "
            @click="tagClick()"
          >
            <a-tag
              v-for="tag in approverConfig.value.participantList"
              :key="tag.objId"
              closable
              style="margin: 5px"
              @close="delHuman(tag.id)"
              >{{ tag.objName }}</a-tag
            >
          </div>
        </a-form-item>
        <a-form-item
          v-show="approverConfig.value.participantFormat === 2"
          field="tempName"
          label="选择角色"
          validate-trigger="input"
          required
        >
          <a-select v-model="roleValue" placeholder="请选择" allow-clear>
            <a-option v-for="role in roleList" :key="role.id">{{
              role.name
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          class="item"
          v-show="approverConfig.value.participantFormat === 2"
          field="tempName"
          label="人员姓名"
          validate-trigger="input"
          required
        >
          <a-input-tag
            :default-value="['test']"
            :style="{ width: '320px' }"
            placeholder="系统自动读取"
          />
        </a-form-item>
        <a-form-item
          v-show="approverConfig.value.participantFormat === 3"
          field="tempName"
          label="选择上级"
          validate-trigger="input"
          required
        >
          <div style="white-space: nowrap; margin-right: 10px">发起人的</div>
          <a-select
            v-model="roleValue"
            placeholder="Please select ..."
            allow-clear
          >
            <a-option>Beijing</a-option>
            <a-option>Shanghai</a-option>
            <a-option>Guangzhou</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          v-show="approverConfig.value.participantFormat === 3"
          field="tempName"
          label="人员姓名"
          validate-trigger="input"
          required
        >
          <a-input-tag
            :default-value="['test']"
            :style="{ width: '320px' }"
            placeholder="系统自动读取"
          />
        </a-form-item>
        <a-form-item
          class="item"
          field="tempName"
          label="多人审批时采用的审批方式"
          validate-trigger="input"
          required
        >
          <a-space size="large">
            <a-radio-group v-model="approverConfig.value.examineType">
              <a-radio :value="1">会签</a-radio>
            </a-radio-group>
            <a-radio :value="2">或签</a-radio>
          </a-space>
        </a-form-item>
        <a-form-item
          class="item"
          field="tempName"
          label="审批人为空时"
          validate-trigger="input"
          required
        >
          <a-space :direction="'vertical'">
            <a-space size="large">
              <a-radio-group v-model="approverConfig.value.participantIsNull">
                <a-radio :value="1">自动通过</a-radio>
                <a-radio :value="2"> 自动转交给管理员</a-radio>
                <a-radio :value="3">指定人员</a-radio>
              </a-radio-group>
            </a-space>
            <div
              v-if="approverConfig.value.participantIsNull === 3"
              style="
                border: 1px solid #c9cdd4;
                width: 100%;
                border-radius: 4px;
                display: flex;
                flex-wrap: wrap;
                min-height: 30px;
                cursor: text;
              "
              @click="tagClick(1)"
            >
              <a-tag
                v-if="approverConfig.value?.nodeIsNullParticipantId"
                closable
                style="margin: 5px"
              >
                {{ approverConfig.value?.nodeIsNullParticipantName }}
              </a-tag>
            </div>
          </a-space>
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
  <HumanMadal
    v-model:visible="rorleVisible"
    v-model:data="currenHuman"
    @submit="roleOk"
  />
  <!-- <HumanMadal2
    v-model:visible="rorleVisible"
    v-model:selectedId="approverConfig.value.nodeIsNullParticipantId"
    @submit="roleOk"
  /> -->
</template>

<script lang="ts" setup>
import { ref, computed, watch, onMounted, reactive } from 'vue';
import { useFlowStore } from '@/store/index';
import {
  GetHumanRosterList,
  editFlowPanelPoint,
  getFlowPanelPointById,
  delFlowParticipantByIds
} from '@/apis/flowPanelPoint';
import HumanMadal from '../componnents/HumanMadal/index.vue';
import { cloneDeep } from 'lodash';
import { FlowTree } from '@/apis/flowPanelPoint/type';

let emits = defineEmits(['update:nodeConfig']);
const store = useFlowStore();
const roleValue = ref();
const rorleVisible = ref(false);
const setType = ref(0); //0指定成员1审批人为空时指定成员
const currenHuman = ref<any[]>([]);
const tagClick = (n: number = 0) => {
  setType.value = n;
  if (!approverConfig.value.value) return;
  if (n) {
    const { nodeIsNullParticipantId, nodeIsNullParticipantName } =
      approverConfig.value.value;
    currenHuman.value = [
      {
        id: nodeIsNullParticipantId,
        name: nodeIsNullParticipantName
      }
    ];
  } else {
    currenHuman.value =
      cloneDeep(approverConfig.value.value.participantList) || [];
  }
  rorleVisible.value = true;
};
const roleOk = () => {
  if (setType.value) {
    const { id, name } = currenHuman.value[0];
    approverConfig.value.value.nodeIsNullParticipantId = id;
    approverConfig.value.value.nodeIsNullParticipantName = name;
  } else {
    let arr: any = [];
    currenHuman.value.forEach((item, index) => {
      let obj = {
        objId: item.id,
        objName: item.name,
        objType: 1,
        orderNo: index + 1
      };
      arr.push(obj);
    });
    approverConfig.value.value.participantList = arr;
  }

  rorleVisible.value = false;
};

const approverConfig = ref<{ value?: FlowTree }>({
  value: { participantList: [] }
});
watch(
  () => store.approverConfig1,
  () => {
    approverConfig.value = store.approverConfig1;
  },
  { deep: true }
);
const closeDrawer = () => {
  store.setApprover(false);
};
let visible = computed({
  get() {
    return store.approverDrawer;
  },
  set() {
    closeDrawer();
  }
});
watchEffect(() => {
  if (visible.value) return;
  nextTick(() => {
    getPonit();
    getHumanList();
  });
});
const handleOk = async () => {
  store.setApproverConfig({
    value: approverConfig.value,
    flag: true,
    id: approverConfig.value.id
  });
  const {
    id,
    processId,
    pointName,
    examineType,
    participantList,
    participantIsNull,
    nodeIsNullParticipantId,
    nodeIsNullParticipantName
  } = approverConfig.value.value;
  let obj = {
    id,
    processId,
    pointName,
    examineType,
    participantList,
    participantIsNull,
    nodeIsNullParticipantId,
    nodeIsNullParticipantName
  };
  console.log('approverConfig.value', approverConfig.value);

  await delFlowParticipantByIds({ ids: delIds.value });
  await editFlowPanelPoint({ ...obj });
  emits('update:nodeConfig', approverConfig.value);
  store.setApprover(false);
};
const handleCancel = () => {
  store.setApprover(false);
};

// 获取角色下拉列表
const roleList = ref<{ id: number; name: string }[]>([]);

const humanList = ref<any[]>([]);
const getHumanList = async () => {
  const res = await GetHumanRosterList({
    pageNumber: 0,
    pageSize: 20,
    typeName: 5
  });
  humanList.value = res?.content || [];
};
const getPonit = async () => {
  const id = approverConfig.value.value.id;
  // await getFlowPanelPointById(id);
};
const delIds = ref<number[]>([]);
const delHuman = (id?: number) => {
  const index = approverConfig.value.value.participantList?.findIndex(
    (item) => item.id === id
  );
  approverConfig.value.value.participantList.splice(index, 1);
  if (!id) return;
  if (delIds.value.includes(id)) return;
  delIds.value.push(id);
};
</script>

<style lang="less" scoped>
.item {
  padding-bottom: 16px;
  margin: 8px 0;
  border-bottom: 1px solid #eee;
}
</style>
